<template>
  <div id="left-aside">
    <el-menu background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
      <div class="title">后台管理系统</div>
      <el-menu-item @click="menuClick(item)" v-for="item in noChildren" :index="item.name" :key="item.name">
        <i :class="'el-icon-' + item.icon"></i>
        <span slot="title">{{item.label}}</span>
      </el-menu-item>

      <el-submenu v-for="(item,index) in hasChildren" :key="index" index="4">
        <template slot="title">
          <i :class="'el-icon-' + item.icon"></i>
          <span slot="title">{{item.label}}</span>
        </template>
        <el-menu-item-group>
          <el-menu-item @click="menuClick(iitem)" v-for="iitem in item.children" :key="iitem.name" :index="iitem.name">
            <i :class="'el-icon-' + iitem.icon"></i>
            {{iitem.label}}
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: "LeftAside",
  data() {
    return {
      menu: [
        {
            path: '/',
            name: 'home',
            label: '首页',
            icon: 's-home',
            url: 'Home/home',
        },
        {
            path: '/mall',
            name: 'mall',
            label: '商品管理',
            icon: 'video-play',
            url: 'MallManage/MallManage',
        },
        {
            path: '/user',
            name: 'user',
            label: '用户管理',
            icon: 'user',
            url: 'UserManage/UserManage',
        },
        {
            label: '其他',
            icon: 'location',
            children: [
                {
                  path: '/page1',
                    name: 'page1',
                    label: '页面1',
                    icon: 'setting',
                    url: 'Other/PageOne'
                },
                {
                  path: '/page2',
                    name: 'page2',
                    label: '页面2',
                    icon: 'setting',
                    url: 'Other/PageTwo'
                }
            ]
        }
      ]
    };
  },
  computed: {
    ...mapState({
      isCollapse: state => state.tab.isCollapse
    }),

    //左侧菜单栏数据过滤
    noChildren() {
      return this.menu.filter(i => !i.children)
    },
    hasChildren() {
      return this.menu.filter(i => i.children)
    },
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    //菜单栏点击跳转
    menuClick(item) {
      this.$router.push({
        name: item.name
      })
      this.$store.commit('selectMenu', item)
    },
  }
}
</script>

<style lang="less" scoped>
.el-menu {
  height: 100vh;
  border: none;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.title {
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  height: 50px;
  line-height: 50px;
  margin-left: 15px;
  overflow: hidden;
}
</style>